<template>
  <div class="moment-homepage">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->
    <van-tabbar class="van-hairline--top" v-model="activeTab">
      <van-tabbar-item replace icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item replace to="/identity">
        身份证
        <template #icon>
          <i class="iconfont icon-cardid"></i>
        </template>
      </van-tabbar-item>
      <div class="moment-homepage-publish-btn" @click="togglePopup">+</div>
      <van-tabbar-item> </van-tabbar-item>
      <van-tabbar-item replace to="/message-notification"
        >消息
        <template #icon>
          <i class="iconfont icon-xiaoxi"></i>
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace icon="setting-o" to="/settings">
        设置
      </van-tabbar-item>
    </van-tabbar>

    <van-popup
      v-model:show="showPublishPopup"
      round
      closeable
      position="bottom"
      :style="{ height: '24%' }"
    >
      <h1 class="moment-homepage-title">选择发布场景</h1>
      <div class="moment-homepage-publish">
        <div
          class="moment-homepage-publish-item"
          @click="publishHandle('community')"
        >
          <i class="iconfont icon-shequ"></i>
          <span>社区</span>
        </div>
        <div
          class="moment-homepage-publish-item"
          @click="publishHandle('send-support')"
        >
          <i class="iconfont icon-home"></i>

          <span>寄养</span>
        </div>
        <div
          class="moment-homepage-publish-item"
          @click="publishHandle('adopt')"
        >
          <i class="iconfont icon-cat"></i>
          <span>领养</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { Toast } from "vant";
import { useRouter, useRoute } from "vue-router";
const activeTab = ref<number>(0);
const showPublishPopup = ref<boolean>(false);
const route = useRoute();
const router = useRouter();
const tabbarMap = new Map([
  ["/", 0],
  ["/home", 0],
  ["/identity", 1],
  ["/message-notification", 3],
  ["/settings", 4],
]);
const publishMap = new Map([
  ["community", "社区发布"],
  ["send-support", "寄养发布"],
  ["adopt", "领养发布"],
]);

// 切换popup
const togglePopup = (): void => {
  showPublishPopup.value = !showPublishPopup.value;
};

// 发布信息
const publishHandle = (type: string): void => {
  if (type === "send-support") {
    router.push("/adopt-publish");
  }
  Toast(publishMap.get(type));
};

watch(activeTab, (newVal) => {
  localStorage.setItem("moment-setting-tabbar", JSON.stringify(newVal));
});

watch(
  route,
  (newVal) => {
    const path = newVal.path;
    activeTab.value = tabbarMap.get(path) as number;
  },
  { immediate: true }
);

onMounted(() => {
  activeTab.value = Number(localStorage.getItem("moment-setting-tabbar"));
});
</script>

<style lang="less" scoped>
.moment-homepage {
  .icon-cardid {
    font-size: 21px;
  }

  .icon-xiaoxi {
    font-size: 26px;
  }

  &-title {
    text-align: center;
    margin-top: 25px;
    font-size: 16px;
    color: var(--font-color-std-5);
  }

  &-publish {
    display: flex;
    align-items: center;
    padding: 0 50px;
    justify-content: space-between;
    position: absolute;
    top: 38%;
    left: 50%;
    width: 100%;
    box-sizing: border-box;
    transform: translateX(-50%);

    &-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .iconfont {
        width: 32px;
        height: 32px;
        font-size: 28px;
        background-color: var(--background-color-std-6);
        border-radius: 50%;
        padding: 10px;
        color: var(--font-color-std-4);
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icon-home {
        font-size: 26px;
      }

      span {
        color: var(--font-color-std-5);
        font-size: 14px;
      }
    }
  }

  :deep .moment-homepage-publish-btn {
    color: red;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color-std-5);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  :deep .van-tabbar-item:nth-of-type(3) {
    pointer-events: none;
  }

  :deep .van-popup__close-icon {
    color: var(--font-color-7);
  }

  // :deep .van-tabbar::before {
  //   content: "";
  //   position: absolute;
  //   top: 1px;
  //   width: 100%;
  //   height: 1px;
  //   background-color: var(--background-color-std-8);
  //   transform: scaleY(0.5);
  // }
}
</style>
